<script setup lang="ts">
import { getCourses, type CoursesCondition, type CoursesResult } from '@/api/courses';
import { useToggle } from '@vueuse/core';

// Vueuse加载效果、危险提示
const [isLoading, toggleLoading] = useToggle(false);

// 查询条件初始化
const coursesCondition = ref<CoursesCondition>({
    currentPage: 1,
    pageSize: 10,
    status: ''
});

// 查询结果初始化
const coursesResult = ref<CoursesResult>({
    records: [],
    current: 1,
    size: 10,
    total: 0,
    pages: 0
});


// 查询课程管理
async function fetchData(params: CoursesCondition = {}) {
    toggleLoading(true)
    Object.assign(coursesCondition.value, params);
    const { data } = await getCourses(coursesCondition.value);
    if (data.code === '000000') {
        coursesResult.value = data.data;
    } else {
        ElMessage.error('获取课程管理失败');
        throw new Error('获取课程管理失败');
    }
    toggleLoading(false)
}

onMounted(() => {
    fetchData();
});
</script>

<template>
    <div class="courses-index">
        <div class="courses-index-header">
            <div class="courses-index-header-search">
                <el-form :inline="true" class="demo-form-inline">
                    <el-form-item label="课程名称">
                        <el-input placeholder="课程名称" clearable size="large" />
                    </el-form-item>
                    <el-form-item label="状态">
                        <el-select placeholder="全部" clearable size="large">
                            <el-option label="下架" value="0" />
                            <el-option label="上架" value="1" />
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <ElButton type="info" size="large">查询</ElButton>
                    </el-form-item>
                </el-form>
            </div>
            <ElButton type="info" size="large">新增课程</ElButton>
        </div>
        <el-divider>
            <el-icon><el-icon-star-filled /></el-icon>
        </el-divider>
        <div v-loading="isLoading">
            <el-table :data="coursesResult.records" border style="width: 100%;">
                <el-table-column type="index" label="序号" align="center" />
                <el-table-column prop="courseName" label="课程名称" align="center" />
                <el-table-column prop="price" label="价格" align="center" />
                <el-table-column prop="sortNum" label="排序" align="center" />
                <el-table-column prop="status" label="状态" align="center">
                    <el-switch active-text="上架" inactive-text="下架" />
                </el-table-column>
                <el-table-column label="操作" align="center">
                    <template #default>
                        <el-button type="primary">编辑</el-button>
                        <el-button type="danger">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div><el-pagination :total="50" border /></div>
    </div>
</template>

<style scoped lang="scss">
.courses-index {
    flex-direction: column;
    gap: 0.25rem;
    // background-color: rgb(255, 255, 255);
    padding: 0.5rem;

    .courses-index-header {
        display: flex;
        justify-content: space-between;
    }

}

.demo-form-inline .el-input {
    --el-input-width: 220px;
}

.demo-form-inline .el-select {
    --el-select-width: 220px;
}
</style>
